<template>
  <div id="city">
    <city-header></city-header>
    <city-search :abc="abc"></city-search>
    <city-hot :cityHot="cityHot" :abc="abc" :world="world"></city-hot>
    <abc :abc="abc" @abcChange="abcChange"></abc>
  </div>
</template>

<script>
import cityHeader from '@/pages/city/components/cityHeader'
import citySearch from '@/pages/city/components/citySearch'
import cityHot from '@/pages/city/components/cityHot'
import abc from '@/pages/city/components/abc'
import axios from 'axios'
export default {
  name: 'city',
  components: {
    cityHeader,
    citySearch,
    cityHot,
    abc
  },
  data () {
    return {
      abc: {},
      cityHot: [],
      world: '',
      istouch: false
    }
  },
  methods: {
    getData () {
      axios.get('/api/city.json').then(this.getDataSucc)
    },
    getDataSucc (res) {
      if (res.data.ret) {
        this.abc = res.data.data.cities
        this.cityHot = res.data.data.hotCities
      }
    },
    abcChange (e) {
      this.world = e
    }
  },
  mounted () {
    this.getData()
  }
}
</script>

<style>
</style>
